import React, { useState } from 'react'
import Main from './Main'
import './app.scss'
const App = function () {
    // 中间内容初始
    const [main, setMain] = useState('123')
    // 头的
    const [header] = useState([{ age: '张' }, { age: '王' }, { age: '李' }, { age: '肖' }])
    // nav左边的
    const [key] = useState([1, 2, 3, 4, 5, 6])
    const getMain = (index) => {
        const _key = [...key]
        // _key[index] = key[index] 
        setMain(_key[index])
    }
    const getMain2 = (index) => {
        const _header = [...header]
        // _key[index] = key[index] 
        setMain(_header[index].age)
    }
    return <div className='box'>
        <header>
            {
                header.map((item, index) => {
                    return <div><button key={index} onClick={() => getMain2(index)}>
                        {item.age}
                    </button>
                    </div>
                })
            }
        </header>
        <main>
            <nav>
                <ul>
                    {
                        key.map((item, index) => {
                            return <li key={index} onClick={() => getMain(index)}>
                                {item}
                            </li>
                        })
                    }
                </ul>
            </nav>
            <Main main={main} />
        </main>
    </div>
}

export default App